<template>
    <div>
        <el-dialog :title="form.id ? '编辑客户规则' : '新建客户规则'" width="700px" :visible.sync="dialogVisible">
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="规则名称">
                            <el-input v-model="form.name" type="text" placeholder="请输入" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="客户等级">
                            <el-select v-model="form.level_id" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="(item, index) in dict.levelList" :key="index" :label="item.name" :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="时间类型">
                            <el-radio-group v-model="form.days_type" size="medium">
                                <el-radio-button label="1" >天</el-radio-button>
                                <el-radio-button label="2">周</el-radio-button>
                                <el-radio-button label="3">时间段</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="条件">
                            <el-select v-model="form.condition" placeholder="请选择" style="width: 100%;">
                                <el-option label=">" value=">" />
                                <el-option label="=" value="=" />
                                <el-option label="<" value="<" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="form.days_type==1" :span="24">
                        <el-form-item label="天数">
                            <el-input v-model="form.days" type="number" placeholder="请输入" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="form.days_type==2" :span="24">
                        <el-form-item label="周">
                            <el-select v-model="form.days" placeholder="请选择" style="width: 100%;">
                                <el-option label="周一" value="1" />
                                <el-option label="周二" value="2" />
                                <el-option label="周三" value="3" />
                                <el-option label="周四" value="4" />
                                <el-option label="周五" value="5" />
                                <el-option label="周六" value="6" />
                                <el-option label="周日" value="7" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="form.days_type==3" :span="6">
                        <el-form-item label="节假日时间段">
                            <el-date-picker
                                v-model="form.long_times"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="小时">
                            <el-input v-model="form.hours" type="number" placeholder="请输入" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工作开始时间">
                            <el-time-picker
                                v-model="form.work_star"
                                format="HH:mm"
                                value-format="HH:mm"
                                placeholder="请选择">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工作结束时间">
                            <el-time-picker
                                v-model="form.work_end"
                                format="HH:mm"
                                value-format="HH:mm"
                                placeholder="请选择">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="$store.state.user.auth == 1" :span="24">
                        <el-form-item label="部门">
                            <el-cascader v-model="form.dept_id" :options="departOptions" :props="{value: 'id', label: 'name', children: 'child', checkStrictly: true}" :show-all-levels="false" style="width: 100%;" @change="deptChange" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开始日期">
                            <el-date-picker
                                v-model="form.start_date"
                                format="MM-dd"
                                value-format="MM-dd"
                                type="date"
                                placeholder="请选择"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结束日期">
                            <el-date-picker
                                v-model="form.end_date"
                                format="MM-dd"
                                value-format="MM-dd"
                                type="date"
                                placeholder="请选择"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="优先级">
                            <el-input v-model="form.sort" type="number" placeholder="请输入" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <el-switch v-model="form.status" active-value='1' inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { saveKehuRule } from '@/api/gonghai'
import { departList } from '@/api/system'
import { deepClone } from '@/util'
export default {
    name: 'ResvervationAddDialog',
    data() {
        return {
            dialogVisible: false,
            departOptions: [],
            userDisabled: false,
            form: {
                name: '',
                condition: '',
                days_type: '1',
                days: '',
                hours: '',
                start_date: '',
                end_date: '',
                dept_id: '',
                work_star: '',
                work_end: '',
                user_id: '',
                sort: '',
                long_times: '',
                status: 0
            },
            rules: {
                name: [{ required: true, message: '请输入规则名称', trigger: 'change' }]
            }
        }
    },
    computed: {
        ...mapState(["dict"])
    },
    methods: {
        showDialog(item) {
            this.dialogVisible = true;
            this.resetParams();
            this.resetForm();
            this.getOptions();
            if (item && item.id) {
                this.form = deepClone(item)
            }
            if (item.user_id) {
                this.$nextTick(() => {
                    this.form.user_id = item.user_id;
                    this.userDisabled = true
                })
            }
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
            })
        },
        resetParams() {
            this.form = {
                name: '',
                condition: '',
                days_type: '1',
                days: '',
                hours: '',
                start_date: '',
                end_date: '',
                dept_id: '',
                work_star: '',
                work_end: '',
                user_id: '',
                sort: '',
                long_times: '',
                status: 0
            };
            this.userDisabled = false;
        },
        handleSubmit(e) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    saveKehuRule(this.form).then(res => {
                        if (res.status == '1') {
                            this.$message.success('操作成功！')
                            this.$emit('success', res)
                        } else {
                            this.$message.error(res.message)
                        }
                    }).finally(() => {
                        this.dialogVisible = false
                    })
                }
            })
        },
        getOptions() {
            departList().then(res => {
                if (res.status == '1') {
                    this.departOptions = res.data.list || []
                }
            })
        },
        deptChange(e) {
            console.log(e)
            this.$nextTick(() => {
                this.form.dept_id = e.length ? e[e.length - 1] : ''
            })
        }
    }
}
</script>
